<template>
  <div class="companyshow">
    <van-cell>
      <van-icon v-if="company" name="friends-o" />
      <van-icon v-else name="smile-o" />
      <span style="font-size:14px" v-if="company">诚信注册家服员</span>
      <span style="font-size:14px" v-else>湖南征信认证家服公司</span>
    </van-cell>
    <div
      class="cominfomation"
      v-for="(item, index) in company ? people : companys"
      :key="index"
    >
      <van-cell-group class="cominfomations">
        <van-cell>
          <div>
            <van-row type="flex" style="height:100%">
              <van-col span="7" style="height:80px">
                <img v-if="company" class="peoimg" :src="item.photo" alt="" />
                <img v-else :src="item.image" alt="" />
              </van-col>
              <van-col span="17">
                <div class="rightinfo">
                  <van-row v-if="company" type="flex">
                    <van-col span="12">
                      <span class="rightname">{{ item.name }}</span>
                    </van-col>
                    <van-col span="12" style="text-align:right">
                      <span class="peowage">{{ item.wage }}</span>
                    </van-col>
                  </van-row>

                  <div v-else>
                    <span class="rightname">{{ item.name }}</span>
                    <div>
                      <span class="righteva">{{ item.evaluation }}</span>
                    </div>
                  </div>

                  <van-row type="flex">
                    <van-col
                      v-for="(option, index) in item.options"
                      :key="index"
                      span="7"
                    >
                      <div class="rightopt">
                        <span>{{ option }}</span>
                      </div>
                    </van-col>
                  </van-row>
                </div>
              </van-col>
            </van-row>
            <van-row v-if="company" type="flex" justify="center">
              <van-col v-for="(obj, index) in item.information" :key="index">
                <span class="peoinfos">{{ obj }}</span>
              </van-col>
            </van-row>
            <van-row type="flex" v-else>
              <van-col>
                <div class="comicon">
                  <van-icon name="location-o" /><span class="distance">{{
                    item.distance
                  }}</span>
                  <span class="adress">{{ item.adress }}</span>
                </div>
              </van-col>
            </van-row>
          </div>
        </van-cell>
      </van-cell-group>
    </div>
    <van-row type="flex" justify="center" v-if="company">
      <van-col class="more">
        {{ "更多家服人员>" }}
      </van-col>
    </van-row>

    <van-row type="flex" justify="center" v-else>
      <van-col class="more">
        {{ "更多公司>" }}
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { getcompanys, getpeople } from "@/api/user.js";
export default {
  props: {
    company: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      companys: [],
      people: []
    };
  },
  created() {
    this.getcompanys();
    this.getpeople();
  },
  methods: {
    async getcompanys() {
      const { data } = await getcompanys();
      this.companys = data;
      console.log(this.companys);
    },
    async getpeople() {
      const { data } = await getpeople();
      this.people = data;
      console.log(this.people);
    }
  }
};
</script>

<style lang="scss" scoped>
.companyshow {
  .van-icon-smile-o,
  .van-icon-friends-o {
    vertical-align: middle;
    margin-right: 9px;
  }
  .cominfomation {
    height: 143px;
    .cominfomations {
      height: 100%;
      .van-cell {
        height: 100%;

        img {
          width: 80px;
          height: 86px;
        }
        .peoimg {
          margin: 5px 0 0 10px;
        }
        .rightinfo {
          .rightname {
            font-family: PingFangSC-regular;
            color: rgb(0, 0, 0);
            font-size: 14px;
          }
          .righteva {
            color: rgba(151, 145, 145, 100);
            font-size: 12px;
            font-family: PingFangSC-regular;
          }
          .rightopt {
            width: 100%;
            height: 23px;
            color: rgba(63, 81, 181, 100);
            font-size: 10px;
            font-family: PingFangSC-regular;
            border-radius: 14px 14px 14px 14px;
            border: 1px solid rgba(63, 81, 181, 100);
            text-align: center;
            margin-top: 4px;
          }
          .peowage {
            color: rgba(151, 145, 145, 100);
            font-family: PingFangSC-bold;
            font-size: 13px;
          }
        }
        .peoinfos {
          color: rgba(151, 145, 145, 100);
          font-size: 12px;
          font-family: PingFangSC-regular;
          margin-left: 40px;
        }
        .comicon {
          .van-icon {
            vertical-align: middle;
            margin-right: 7px;
          }
          .distance {
            margin-right: 17px;
            color: rgba(16, 16, 16, 100);
            font-family: PingFangSC-regular;
            font-size: 12px;
          }
          .adress {
            color: rgba(151, 145, 145, 100);
            font-size: 12px;
            font-family: PingFangSC-regular;
          }
        }
      }
    }
  }
  .more {
    margin: 0 auto;
    color: rgba(123, 119, 119, 100);
    font-size: 12px;
  }
}
</style>
